import Vue from 'vue'
import Router from "vue-router";
import VueRouter from 'vue-router' // 引用路由
import Home from '../views/Home.vue' //导入方法1 Home页面
import Login from '../views/Login.vue'


Vue.use(VueRouter)

// 1、通过 import 导入文件的形式，定义变量使用，就是 Home 页面的使用方法；

// 2、直接在 routes 中配置要导入的文件，就是 About 页面的使用方法；
const router  = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
      }
    },
    {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
      path: '/Login',
      name: '/Login',
      component: Login
    },

    {
      path: '/Form',
      name: '表单',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/Form.vue')
    },
  ]
});
router.beforeEach((to,from,next)=>{  // 判断该路由是否需要登录权限
  if(to.meta.requireAuth){
    if(window.localStorage.Token&&window.localStorage.Token.length>=128){  // 通过vuex state获取当前的token是否存在
      next();
    }else{
      next({
        path:'/Login',
        query:{redirect:to.fullPath}   // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }else{
    next();
  }
})

//   // 定义多级路由
//   // {
//   //   path: '/tourcard',
//   //   icon: 'android-settings',
//   //   name: 'tourcard',
//   //   title: '父路由',
//   //   component: Main,
//   //   children: [
//   //     {
//   //       path: 'tourcard-card',
//   //       title: '子路由1',
//   //       name: 'tourcard-card',
//   //       component: () =>
//   //           import ('@/views/tourcard/tourcard-card/tourcard-main.vue'),
//   //       children: [
//   //         {
//   //           path: 'tourcard-main',
//   //           title: '孙路由1',
//   //           name: 'tourcard-main',
//   //           component: () =>
//   //               import ('@/views/tourcard/tourcard-card/tourcard-card/tourcard-card.vue'),
//   //         }, 
//   //         {
//   //           path: 'tourcard-detail',
//   //           title: '孙路由2',
//   //           name: 'tourcard-detail',
//   //           component: () =>
//   //               import ('@/views/tourcard/tourcard-card/tourcard-detail/tourcard-detail.vue')
//   //         }]
//   //     }, 
//   //     {
//   //       path: 'tourcard-saleOrder',
//   //       title: '子路由2',
//   //       name: 'tourcard-saleOrder',
//   //       component: () =>
//   //           import ('@/views/tourcard/tourcard-saleOrder/tourcard-saleOrder.vue')
//   //     }]
//   //   }


export default router 
